<template>
  <div class="table">
    <div class="t-head">
      <div class="item name">场地名称</div>
      <div class="item position">位置</div>
      <!-- <div class="item num">当前人数</div> -->
      <div class="item state">状态</div>
    </div>
    <div class="t-body">
      <div v-for="(item, i) in list" :key="i" class="t-item">
        <div class="item name">{{ item.name }}</div>
        <div class="item position">{{ item.address }}</div>
        <!-- <div class="item num">{{ item.num }}</div> -->
        <div class="item state" :class="item.class">{{ item.state }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //   data: {
  //     type: Object,
  //     default() {
  //       return {};
  //     }
  //   }
  // },
  data() {
    return {
      list: [
        {
          name: "雨坤游泳",
          address: "L1-N01",
          num: 29,
          state: "空闲",
          class: "full"
        },
        {
          name: "仁和跆拳道馆",
          address: "L1-N02",
          num: 1,
          state: "空闲",
          class: "free"
        },
        {
          name: "堂颂飞羽",
          address: "L2-N02",
          num: 8,
          state: "空闲",
          class: "free"
        },
        {
          name: "雨坤健身",
          address: "L2-N03",
          num: 15,
          state: "空闲",
          class: "crowd"
        },
        {
          name: "全科诊所",
          address: "L1-N03",
          num: 1,
          state: "空闲",
          class: "free"
        },
        {
          name: "白杏物理康复",
          address: "L1-N04",
          num: 5,
          state: "空闲",
          class: "free"
        },
        {
          name: "派乐乒乓",
          address: "L2-N04",
          num: 9,
          state: "空闲",
          class: "crowd"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.table {
  .t-head {
    background: rgba(255, 255, 255, 0.09);
    padding: 14px 13px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
  }
  .t-body {
    .t-item {
      padding: 17px 13px;
      display: flex;
      align-items: center;
      font-size: 14px;
      border-bottom: 2px solid #707070;
    }
  }
  .item {
    &.name {
      width: 50%;
    }
    &.position {
      width: 30%;
      text-align: center;
    }
    // &.num {
    //   width: 25%;
    //   text-align: center;
    // }
    &.state {
      width: 20%;
      text-align: center;
    }
  }
}
</style>
